<template>
    <div id="Curriculum">
        <Carousel></Carousel>
        <h3>精选课程</h3>
        <ul>
            <li class="list" v-for="(item ,i) in clas.slice(0, 4)" :key="i" >
                <router-link :to="'/details/'+item.id">
                    <img :src="item.img" alt="">
                    <div>
                        <p>{{item.title}}</p>
                        <div class="pingjia">
                            <el-rate
                                v-model="item.pingjia"
                                disabled
                                show-score
                                text-color="#ff9900"
                                score-template="{value}">
                            </el-rate>
                            <p id="span">评价:{{item.pingjia}}</p>
                            <span id="span">{{item.sale}}人学过</span>
                        </div>
                        <span class="price">价格：{{item.prices}}</span>
                    </div>
                </router-link>
            </li>
        </ul>
        <div class="more el-icon-refresh" @click="more">
        换一批
      </div>
    </div>
</template>

<script>
import { getClassList } from "@/api/curriculim";
    export default {
        data() {
            return{
                value:3,
                clas:[],
                page:1
            }
        },
        mounted() {
            this.getclassList()
        },
        methods: {
          getclassList() {
            getClassList(this.page).then((res) => {
              if (res.data.length == 0) {
                this.page=1
                this.getclassList()
              } else {
                this.clas = res.data;
                this.page++;
              }
            });
            console.log(this.clas);
          },
          more() {
            this.getclassList(this.page);
          },
        },
    }
</script>
<style lang="scss" scoped>
    #Curriculum h3{
        font-size: 14px;
        margin-left: 10px;
        margin-bottom:10px;
    }
    #Curriculum ul{
        width:100%;
        height:6.8rem;
        font-size:12px;
        padding-bottom: 0.48rem;
    }
    #Curriculum ul li{
        width:48%;
        height:55%;
        float:left;
        margin-left: 0.03rem;
    }
    #Curriculum ul li img{
        width:100%;
        height:50%;
    }
    .more {
  height: 0.3rem;
  font-size: 0.12rem;
  text-align: center;
  width: 100%;
  padding-bottom: 1.5rem;
}
</style>